import React from 'react'
import { Space, List, Switch } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button, Input, Form, Picker, } from 'react-vant'
import { Image, NavBar, Toast } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
// import {useNavigate,useSearchParams} from 'react-router-dom'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'

export default function Realname() {
  const [form] = Form.useForm()
  let navigate = useNavigate()
  const onFinish = values => {
    console.log(values,'values')
    navigate('/getimg')
    sessionStorage.setItem('users', JSON.stringify(values))
  }
  return (
    <div id='realname'>
      <div className="top">
        <NavBar
          style={{ backgroundColor: '#FFFFFF' }}
          back={
            <>
              <ArrowLeft />
              返回
            </>
          }
          onBackClick={()=>{navigate(-1)}}
        >
          实名认证
        </NavBar>
        {/* <ArrowLeft></ArrowLeft> */}
      </div>
      <div className="cen" >
        <p style={{ fontSize: '18px', fontWeight: 'bold', textAlign: 'center', marginTop: '10px' }}>以下信息用于核实您的真实身份</p>
        <span style={{ fontSize: '12px', color: '#AAACAA', textAlign: 'center', display: 'block', marginTop: '10px', letterSpacing: '2px' }}>实名认证可能会影响到您的叫车服务，请认真填写</span>
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
            <Button onClick={form.submit}  round  style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '0.15rem', marginTop: '0.2667rem' }} block>
              下一步
            </Button>
            </div>
          }
        >
          <Form.Item
            style={{ marginTop: '30px' }}
            tooltip={{
              message:
                'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
            }}

            rules={[{ required: true, message: '请填写您的真实姓名' }]}
            name='username'
            label='姓名'
          >
            <Input placeholder='请填写您的真实姓名' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请输入手机号码' }]}
            name='phone'
            label='手机号'
          >
            <Input placeholder='请输入手机号码' />
          </Form.Item>
          <Form.Item
            isLink
            name='picker'
            label='请选择'
            trigger='onConfirm'
            onClick={(_, action) => {
              action.current?.open()
            }}
          >
            <Picker
              popup
              columns={[
                '身份证',
                '社保卡',

              ]}
            >
              {val => val || '请选择证件类型'}
            </Picker>
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请输入证件号' }]}
            name='userid'
            label='证件号'
          >
            <Input placeholder='请输入证件号' />
          </Form.Item>
        </Form>

      </div>
    </div>
  )
}
